import React, { useState, useEffect } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { Toast } from "antd-mobile";
import { connect } from "react-redux";
import { InterfaceG } from "@config/Config";
import XhfTwoInfo from "../components/xhfTwoInfo/index";
import yhTools from "@tools/yh";
import { checkBonus } from "@redux/Action/bank/bank";
import creditStore from "../creditStore";
import "./index.scss";
const submitCardRegexp = value => value.replace(/\s*/g, "");
const checkNameReg = value => /^.{0,30}$/.test(value);
const checkIdCard = value => /^.{18}$/.test(value);

const TwoElementPage = props => {
	//pageState
	const [twoElementParams, setTwoElementParams] = useState({}); //二要素信息
	const [inputDisabled, setInputDisabled] = useState(false); //是否禁用二要素输入框
	const [bannerList, setBannerList] = useState([]); //头部banner

	//初始化二要素信息
	const xhfQueryTwoElement = () => {
		const objs = {
			url: InterfaceG.xhf_credit_initTwoElement,
			params: {}
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data;
				if (data.userName && data.idNo) {
					setTwoElementParams({
						userName: data.userName,
						idNo: data.idNo
					});
					setInputDisabled(true);
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	//获取配置的banner
	const getChannelBannerList = () => {
		const params = {
			url: InterfaceG.getChannelBannerList,
			params: {
				pageType: "xhf_auth_image",
				productNo: "601"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code, data = {} } = res;
			if (code == "0") {
				let bannerList = [];
				let bannerObj = data["1"] && data["1"].length > 0 ? data["1"]["0"] : {};
				bannerObj["link"] = bannerObj.linkUrl;
				bannerList.push(bannerObj);
				setBannerList(bannerList);
			}
		});
	};

	useEffect(() => {
		console.log("【二要素】props:", props);
		props._checkBonus(`${props.currentCode}0${props.current}`);
		xhfQueryTwoElement();
		getChannelBannerList();
	}, []);

	const checkCanSubmit = (idNo, userName) => {
		if (!userName) {
			Toast.info("请输入姓名", 2);
			return false;
		}
		if (!checkNameReg(submitCardRegexp(userName))) {
			Toast.info("请输入正确的姓名", 2);
			return false;
		}
		if (!idNo) {
			Toast.info("请输入身份证", 2);
			return false;
		}
		if (!checkIdCard(submitCardRegexp(idNo))) {
			Toast.info("请输入正确的身份证", 2);
			return false;
		}
		return true;
	};

	const addTwoElementsFn = (idNo, userName) => {
		const { applyNo, lnid } = props;
		if (checkCanSubmit(idNo, userName)) {
			let objs = {
				url: InterfaceG.xhf_credit_submitTwoElement,
				params: {
					applyNo,
					idNo,
					userName,
					productNo: "601",
					lnid,
					version: "1.0"
				},
				_alertShow: false
			};
			Toast.loading("加载中...", 100);

			yhTools.request(objs).then(res => {
				Toast.hide();
				if (res.code === "0") {
					let infoStr = JSON.stringify({ idNo, userName });
					sessionStorage.setItem("credit_faceParams_info", infoStr);
					props.goNext();
				} else {
					Toast.info(res.message, 2);
				}
			});
		}
	};

	//提交二要素
	const submitHandle = (idNo, userName) => {
		console.log("二要素提交参数：", idNo, userName);
		if (inputDisabled) {
			let infoStr = JSON.stringify({ idNo, userName });
			sessionStorage.setItem("credit_faceParams_info", infoStr);
			props.goNext();
		} else {
			addTwoElementsFn(idNo, userName);
		}
	};

	const pageParams = {
		header: {
			title: "实名认证"
		},
		cacheLifecycles: props.cacheLifecycles,
		isModal: true,
		history: props.history
	};

	return (
		<MainLayout pageParams={pageParams} handleBack={props.handleBack}>
			<XhfTwoInfo
				{...props}
				pageParams={{ ...twoElementParams, inputDisabled, bannerList }}
				Submit={submitHandle}
			></XhfTwoInfo>
		</MainLayout>
	);
};

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => {
	return {
		_checkBonus: (val1, val2) => dispatch(checkBonus(val1, val2))
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(creditStore(TwoElementPage));
